<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代理测试网页</title>
</head>
<body>
<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    //获取页面a 标签
    $('#div1').click(function(){
        var _this = this                   //使用变量做_this 缓存
        //此处使用箭头函数this 会变为windows
        // 箭头函数中的this 的指向问题无法使用call 和apply 来进行改变
        setTimeout(()=>{
            $(_this).css('background-color','yellow')
        },1000)
    })

    //另一种写法-> 代理方式，使用$.proxy 方式
    $('#div1').click(function () {
        var fn = function () {
            $(this).css('background-color','red')
        }
        fn = $.proxy(fn,this)
        setTimeout(fn,2000)

        // 精简写法
        setTimeout($.proxy(function () {
            $(this).css('background-color','green')
        },this),3000)
    })

</script>
</body>
</html>